<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <input v-model="value" @keyup.enter="add">
    <button v-on:click="add">添加</button>
    <ul>
      <li v-for="(todo,index) in todos":class="{done:todo.done}">
        <label>
          {{index+1}}.{{todo.value}}
        </label>
        <time>
          {{todo.created|date}}
        </time>
      </li>
    </ul>
    <Todo :total="todos.length" :done="done"/>
  </div>
</template>

<style>
  .done{
    text-decoration: line-through;
  }
</style>

<script>

  import Todo from './Todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')

  export default{
    name:'app',
    components:{Todo},
    computed: {
      done: function () {
        var t = 0;
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].done) {
            t++;
          }
        }
        return t;
      }
    },
    data(){
      return{
        title:"vue-todos",
        todos:[
          {value:"阅读一本关于前端开发的书", done:false,created:Date.now()},
          {value:"补充范例代码", done:true,created:Date.now()},
          {value:"写心得", done:false,created:Date.now()}
        ]
      }
    }
    ,filters:{
      date(val){
        return moment(val).calendar();
//        return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds();
      }
    }
    , methods: {
      add: function () {
        this.todos.push({value: this.value, done: false,created:Date.now()})

      }
    }
  }
</script>